<template>
	<div class="page-404">

		<leftSlidebar></leftSlidebar>
		<Headerbar></Headerbar>
		<main>
			
			<!-- <p class="title">谁家的孩子走丢了！！！</p> -->
			<pre>
		         .----.
		       _.'__    `.
		   .--($)($$)---/#\
		 .' @          /###\
		 :         ,   #####
		  `-..__.-' _.-\###/
		        `;_:    `"'
		      .'"""""`.
		     /,  ya ,\\
		    //  404!  \\
		    `-._______.-'
		    ___`. | .'___
		   (______|______)
			</pre>
        </main>
	</div>
</template>

<script type="text/javascript">
	import leftSlidebar from './left-slidebar'
	import Headerbar from './headerbar'
	export default {
		data () {
			return {

			}
		},
		components: { leftSlidebar, Headerbar }
	}
</script>

<style lang="less" scoped>
	.page-404 {
		width: 100%;
		height: 100%;
		// background: #33485C;
		.title {
			color:#16A8E1;
			font-size: 50px;
			text-align: center;
		}
		pre{
			// width: 300px;
			font-size:40px;
			text-align: center;
			display: flex;
			align-item:center;
			justify-content:center;
		}

		main{
            width:85%;
            margin-top:55px;
            height: e("calc(100% - 55px)");
            padding:10px 20px;
            float: right;
            background: #E8EDF0;
            overflow: auto;
        }
	}
</style>